<!DOCTYPE html>
<html lang="zh-CN">
<!--

-->

<head>
    <!-- █████████████████ <head> 元数据 █████████████████ -->

    <!-- 🔤 字符编码声明：必须放在最前面，避免乱码 -->
    <!-- 📌 演示：删除此行，保存含中文的文件，观察是否乱码 -->
    <meta charset="UTF-8">

    <!-- 📱 视口设置：移动端响应式核心 -->
    <!-- width=device-width → 宽度等于设备宽度 -->
    <!-- initial-scale=1.0 → 初始缩放比例 100% -->
    <!-- maximum-scale=5.0 → 最大可放大5倍 -->
    <!-- user-scalable=yes → 允许用户缩放 -->
    <!-- 📌 演示：删除此行，在手机打开页面，文字会非常小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

    <!-- 🏷️ 页面标题：显示在浏览器标签页、书签、搜索结果 -->
    <!-- 📌 演示：修改标题文字，保存后刷新，观察标签页变化 -->
    <title>HTML 标签终极教程 </title>

    <!-- 📄 页面描述：SEO + 社交分享摘要 -->
    <!-- 搜索引擎结果页显示，建议 50-160 字符 -->
    <!-- 📌 演示：复制本页 URL 到微信/钉钉，观察分享卡片摘要 -->
    <meta name="description" content="最全面的 HTML 教学页面，涵盖所有常用标签、完整 head 元数据、SEO 优化、社交分享协议、PWA 支持等，适合教师授课或自学。">

    <!-- 🔑 关键词：部分搜索引擎仍参考（非核心） -->
    <meta name="keywords" content="HTML,HTML5,元数据,meta标签,SEO,前端教学,Web开发,viewport,OpenGraph,TwitterCard">

    <!-- ✍️ 作者信息 -->
    <meta name="author" content="前端大牛">

    <!-- 🤖 爬虫指令：index=允许索引，follow=允许跟踪链接 -->
    <!-- noindex, nofollow → 禁止索引和跟踪 -->
    <!-- 📌 演示：改为 noindex，用 Google Search Console 检测（需部署） -->
    <meta name="robots" content="index, follow">

    <!-- 🔄 页面自动刷新/跳转（慎用！用户体验差） -->
    <!-- 30秒后刷新：<meta http-equiv="refresh" content="30"> -->
    <!-- 5秒后跳转：<meta http-equiv="refresh" content="5;url=https://example.com"> -->

    <!-- 🖥️ IE 兼容模式：强制使用最新渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 📞 禁用 iOS 自动识别电话号码 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 📍 禁用地址识别 -->
    <meta name="format-detection" content="address=no">
    <!-- ✉️ 禁用邮箱识别 -->
    <meta name="format-detection" content="email=no">

    <!-- 📘 Open Graph 协议：Facebook / LinkedIn / 微信等分享卡片 -->
    <!-- og:title → 分享标题 -->
    <!-- og:description → 分享描述 -->
    <!-- og:image → 分享图片（建议 1200x630 像素） -->
    <!-- og:url → 页面规范链接 -->
    <!-- og:type → 类型（website/article/video...） -->
    <!-- og:locale → 语言区域 -->
    <!-- og:site_name → 站点名称 -->
    <!-- 📌 部署到线上后，粘贴链接到微信对话框，观察预览卡片 -->
    <meta property="og:title" content="HTML 标签终极教程">
    <meta property="og:description" content="从零讲解 HTML 所有核心标签 + 完整 head 元数据配置，教学演示利器。">
    <meta property="og:image" content="https://via.placeholder.com/1200x630/007BFF/FFFFFF?text=HTML+教程封面">
    <meta property="og:url" content="https://yourdomain.com/html-tutorial.html">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="zh_CN">
    <meta property="og:site_name" content="前端教学实验室">

    <!-- 🐦 Twitter Card：推特分享优化 -->
    <!-- twitter:card → summary / summary_large_image -->
    <!-- twitter:image → 大图模式需至少 300x157 像素 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="HTML 标签终极教程">
    <meta name="twitter:description" content="最完整的 HTML 教学资源，含元数据详解。">
    <meta name="twitter:image" content="https://via.placeholder.com/800x400/1DA1F2/FFFFFF?text=Twitter+Card">
    <meta name="twitter:site" content="@yourhandle">
    <meta name="twitter:creator" content="@yourhandle">

    <!-- 🔗 Canonical URL：声明“官方版本”，避免重复内容惩罚 -->
    <!-- 📌复制本页另存为 tutorial-copy.html，添加 canonical 指向原页 -->
    <link rel="canonical" href="https://yourdomain.com/html-tutorial.html">

    <!-- 🖼️ 网站图标 Favicon（多尺寸支持） -->
    <!-- 传统 ico 格式 -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- PNG 格式（现代浏览器） -->
    <link rel="icon" type="image/png" sizes="32x32" href="https://via.placeholder.com/32/2c3e50/FFFFFF?text=F">
    <link rel="icon" type="image/png" sizes="16x16" href="https://via.placeholder.com/16/2c3e50/FFFFFF?text=F">
    <!-- iOS 主屏图标 -->
    <link rel="apple-touch-icon" sizes="180x180" href="https://via.placeholder.com/180/2c3e50/FFFFFF?text=IOS">

    <!-- 🎨 浏览器主题色（Android Chrome / PWA） -->
    <!-- 📌 在安卓 Chrome 打开 → 点“添加到主屏幕” → 观察标题栏颜色 -->
    <meta name="theme-color" content="#2c3e50">

    <!-- 📱 移动 Web App 能力声明 -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- 🍎 iOS Safari 设置 -->
    <!-- 主屏显示名称 -->
    <meta name="apple-mobile-web-app-title" content="HTML教程">
    <!-- 是否全屏（隐藏地址栏） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 状态栏样式：default/black/black-translucent -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <!-- 🪟 Windows 磁贴（旧版 Edge / IE） -->
    <meta name="msapplication-TileColor" content="#2c3e50">
    <meta name="msapplication-TileImage" content="https://via.placeholder.com/144/2c3e50/FFFFFF?text=WIN">

    <!-- 🌐 默认语言 -->
    <meta http-equiv="Content-Language" content="zh-CN">

    <!-- 🚫 禁用 Google 自动翻译 -->
    <meta name="google" content="notranslate">

    <!-- 🔍 网站所有权验证（示例，实际需替换为你的验证码） -->
    <!-- Google Search Console -->
    <!-- <meta name="google-site-verification" content="xxxxxxxxxxxx"> -->
    <!-- Bing Webmaster -->
    <!-- <meta name="msvalidate.01" content="xxxxxxxxxxxx"> -->
    <!-- Yandex -->
    <!-- <meta name="yandex-verification" content="xxxxxxxxxxxx"> -->

    <!-- 📡 RSS 订阅（如有博客） -->
    <!-- <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml"> -->

    <!-- 🧩 PWA 渐进式 Web 应用 -->
    <!-- 应用清单（需配合 manifest.json） -->
    <!-- <link rel="manifest" href="/manifest.json"> -->
    <!-- 应用名称 -->
    <!-- <meta name="application-name" content="HTML教程"> -->
    <!-- 关联 App Store（iOS） -->
    <!-- <meta name="apple-itunes-app" content="app-id=123456789"> -->

    <!-- ⚡ 性能优化：预加载关键资源 -->
    <!-- <link rel="preload" href="style.css" as="style"> -->
    <!-- <link rel="preload" href="app.js" as="script"> -->

    <!-- 🌍 DNS 预解析：提前解析第三方域名 -->
    <!-- <link rel="dns-prefetch" href="//fonts.googleapis.com"> -->
    <!-- <link rel="dns-prefetch" href="//www.google-analytics.com"> -->

    <!-- 💄 页面样式（内联 CSS，） -->
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.7;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 4px solid #3498db;
            padding-bottom: 20px;
            margin-bottom: 40px;
        }
        h2 {
            color: #2980b9;
            margin-top: 30px;
            padding-left: 10px;
            border-left: 5px solid #3498db;
        }
        h3 {
            color: #16a085;
            margin-top: 20px;
        }
        section {
            margin: 30px 0;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }
        code {
            background: #f0f0f0;
            padding: 3px 8px;
            border-radius: 4px;
            font-family: Consolas, Monaco, "Courier New", monospace;
            font-size: 0.95em;
        }
        .example {
            background: #e3f2fd;
            padding: 20px;
            border-radius: 8px;
            border-left: 5px solid #2196f3;
            margin: 20px 0;
            overflow-x: auto;
        }
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            background: #2c3e50;
            color: white;
            border-radius: 10px;
        }
        .demo-tip {
            background: #fff8e1;
            padding: 15px;
            border-left: 5px solid #ffc107;
            margin: 20px 0;
            border-radius: 0 8px 8px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>🎓 HTML 标签终极教程</h1>
        <p style="text-align: center; font-size: 1.2em; color: #555;">
            本教程包含所有核心 HTML 标签 + 完整 <code>&lt;head&gt;</code> 元数据详解
        </p>



        <!-- ========== 以下为原教程内容（结构未变，仅微调样式） ========== -->

        <!-- 文本标签 -->
        <section>
            <h2>🔤 一、文本相关标签</h2>

            <h3>1. 标题标签 h1 ~ h6</h3>
            <div class="example">
                <h1>这是 h1 标题（最大）</h1>
                <h2>这是 h2 标题</h2>
                <h3>这是 h3 标题</h3>
                <h4>这是 h4 标题</h4>
                <h5>这是 h5 标题</h5>
                <h6>这是 h6 标题（最小）</h6>
            </div>
            <p><strong>说明：</strong> 标题标签用于定义不同级别的标题，<code>h1</code> 最重要，<code>h6</code> 最不重要。通常一个页面只有一个 <code>h1</code>。</p>

            <h3>2. 段落标签 p</h3>
            <div class="example">
                <p>这是一个段落。段落是 HTML 中最常见的文本容器。</p>
                <p>这是另一个段落。每个段落都会自动换行并有一定间距。</p>
            </div>
            <p><strong>说明：</strong> <code>&lt;p&gt;</code> 标签用于定义段落，浏览器会自动在段落前后添加空白。</p>

            <h3>3. 文本格式化标签</h3>
            <div class="example">
                <p>这是<strong>加粗文本</strong>（语义强调）</p>
                <p>这是<em>斜体文本</em>（语义强调）</p>
                <p>这是<u>下划线文本</u>（非语义，慎用）</p>
                <p>这是<del>删除线文本</del></p>
                <p>这是<ins>插入文本</ins></p>
                <p>这是<small>小号文本</small></p>
                <p>这是<mark>高亮文本</mark></p>
            </div>
            <p><strong>说明：</strong> 使用语义化标签（如 <code>strong</code>、<code>em</code>）比 <code>b</code>、<code>i</code> 更推荐，有助于 SEO 和无障碍访问。</p>
        </section>

        <!-- 链接与图片 -->
        <section>
            <h2>🔗 二、链接与图片</h2>

            <h3>1. 超链接 a</h3>
            <div class="example">
                <p>访问：<a href="https://www.example.com" target="_blank">示例网站</a></p>
                <p>页面内跳转：<a href="#section3">跳转到第三节</a></p>
            </div>
            <p><strong>说明：</strong> <code>href</code> 属性指定链接地址，<code>target="_blank"</code> 在新标签页打开。</p>

            <h3>2. 图片 img</h3>
            <div class="example">
                <img src="https://via.placeholder.com/150" alt="占位图示例" width="150" height="150">
            </div>
            <p><strong>说明：</strong> <code>src</code> 是图片路径，<code>alt</code> 是替代文本（对 SEO 和无障碍很重要），<code>width</code>/<code>height</code> 可设置尺寸。</p>
        </section>

        <!-- 列表 -->
        <section>
            <h2>📋 三、列表标签</h2>

            <h3>1. 无序列表 ul + li</h3>
            <div class="example">
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>橙子</li>
                </ul>
            </div>

            <h3>2. 有序列表 ol + li</h3>
            <div class="example">
                <ol>
                    <li>第一步</li>
                    <li>第二步</li>
                    <li>第三步</li>
                </ol>
            </div>

            <h3>3. 定义列表 dl + dt + dd</h3>
            <div class="example">
                <dl>
                    <dt>HTML</dt>
                    <dd>超文本标记语言</dd>
                    <dt>CSS</dt>
                    <dd>层叠样式表</dd>
                </dl>
            </div>
            <p><strong>说明：</strong> 列表用于组织项目，<code>ul</code> 无序，<code>ol</code> 有序，<code>dl</code> 用于术语定义。</p>
        </section>

        <!-- 表格 -->
        <section id="section3">
            <h2>📊 四、表格标签</h2>
            <div class="example">
                <table border="1" style="border-collapse: collapse; width: 100%;">
                    <thead>
                        <tr style="background-color: #f2f2f2;">
                            <th style="padding: 10px; text-align: left;">姓名</th>
                            <th style="padding: 10px; text-align: left;">年龄</th>
                            <th style="padding: 10px; text-align: left;">城市</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding: 10px;">张三</td>
                            <td style="padding: 10px;">25</td>
                            <td style="padding: 10px;">北京</td>
                        </tr>
                        <tr>
                            <td style="padding: 10px;">李四</td>
                            <td style="padding: 10px;">30</td>
                            <td style="padding: 10px;">上海</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <p><strong>说明：</strong> <code>table</code> 创建表格，<code>tr</code> 行，<code>th</code> 表头单元格，<code>td</code> 普通单元格。<code>thead</code> 和 <code>tbody</code> 用于语义分组。</p>
        </section>

        <!-- 表单 -->
        <section>
            <h2>📝 五、表单标签</h2>
            <div class="example">
                <form action="#" method="post">
                    <p>
                        <label for="name">姓名：</label>
                        <input type="text" id="name" name="name" placeholder="请输入姓名">
                    </p>
                    <p>
                        <label for="email">邮箱：</label>
                        <input type="email" id="email" name="email" required>
                    </p>
                    <p>
                        <label>性别：</label>
                        <input type="radio" id="male" name="gender" value="male">
                        <label for="male">男</label>
                        <input type="radio" id="female" name="gender" value="female">
                        <label for="female">女</label>
                    </p>
                    <p>
                        <label for="country">国家：</label>
                        <select id="country" name="country">
                            <option value="">请选择</option>
                            <option value="cn">中国</option>
                            <option value="us">美国</option>
                            <option value="jp">日本</option>
                        </select>
                    </p>
                    <p>
                        <label for="message">留言：</label><br>
                        <textarea id="message" name="message" rows="4" cols="50" placeholder="写下你的想法..."></textarea>
                    </p>
                    <p>
                        <input type="checkbox" id="agree" name="agree" required>
                        <label for="agree">我同意条款</label>
                    </p>
                    <p>
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </p>
                </form>
            </div>
            <p><strong>说明：</strong> 表单用于收集用户输入。<code>input</code> 有多种类型（text, email, radio, checkbox 等），<code>select</code> 下拉菜单，<code>textarea</code> 多行文本，<code>label</code> 提升可访问性。</p>
        </section>

        <!-- 语义化标签 -->
        <section>
            <h2>🏗️ 六、HTML5 语义化标签</h2>
            <div class="example">
                <header style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                    <h3>网站头部</h3>
                    <nav>
                        <a href="#" style="margin-right: 15px;">首页</a>
                        <a href="#" style="margin-right: 15px;">关于</a>
                        <a href="#">联系</a>
                    </nav>
                </header>

                <main>
                    <article style="background: #f1f8e9; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
                        <h3>文章标题</h3>
                        <p>这是文章内容...</p>
                        <aside style="background: #fff3e0; padding: 15px; border-radius: 8px; margin-top: 15px;">
                            <h4>相关推荐</h4>
                            <ul>
                                <li>相关文章1</li>
                                <li>相关文章2</li>
                            </ul>
                        </aside>
                    </article>
                </main>

                <footer style="background: #f3e5f5; padding: 15px; border-radius: 8px; text-align: center;">
                    <p>&copy; 2025 我的网站. 保留所有权利。</p>
                </footer>
            </div>
            <p><strong>说明：</strong> 语义化标签如 <code>header</code>, <code>nav</code>, <code>main</code>, <code>article</code>, <code>aside</code>, <code>footer</code> 有助于结构清晰、SEO 和无障碍访问。</p>
        </section>

        <!-- 其他实用标签 -->
        <section>
            <h2>🧩 七、其他常用标签</h2>

            <h3>1. 换行与水平线</h3>
            <div class="example">
                <p>第一行<br>第二行（强制换行）</p>
                <hr>
                <p>水平分割线以上</p>
            </div>

            <h3>2. 引用与代码</h3>
            <div class="example">
                <blockquote cite="https://example.com">
                    这是一个块级引用。
                </blockquote>
                <p>行内代码：<code>console.log("Hello World");</code></p>
                <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px;">
function greet() {
    console.log("Hello!");
}</pre>
            </div>

            <h3>3. 注释</h3>
            <div class="example">
                <!-- 这是一个 HTML 注释，不会在页面显示 -->
                <p>上面是一个注释示例（查看源码可见）</p>
            </div>
        </section>



        <footer>
            <h3>🎉 恭喜完成学习！</h3>
            <p>你已掌握 HTML 核心标签 + 完整元数据配置！</p>
        </footer>
    </div>
</body>
</html>